<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>基于canvas的LED时钟</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
				box-sizing: border-box;
				overflow: hidden;
			}
		</style>
		<script src="js/numArray.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<canvas id="mycanvas" width="" height=""></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById("mycanvas");
			var ctx = canvas.getContext('2d');
			canvas.width = document.documentElement.clientWidth;
			canvas.height = document.documentElement.clientHeight;
			var cw = 1/61*document.documentElement.clientWidth;
			var ch = 1/61*document.documentElement.clientHeight;
			var time;
			var balls = [];
			
			function numDraw(arrnum) {
				for(var i = 0; i < numbers[arrnum].length; i++) {
					for(var j = 0; j < numbers[arrnum][j].length; j++) {
						if(numbers[arrnum][i][j] == 1) {
							ctx.fillStyle = "whitesmoke";
							ctx.beginPath();
							ctx.arc(j * cw, i * cw, cw/2, 0, 2 * Math.PI);
							ctx.fill();
						}
					}
				}
			}

			function Ball(x, y, r) {
				this.x = x;
				this.y = y;
				this.r = cw/2;
				this.fx = Math.random()<0.5?-1*(parseInt(Math.random()*5)+1):parseInt(Math.random()*5)+1; ;
				this.fy = -(parseInt(Math.random()*4)+2);
				this.color = "rgb(" + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + ")";
			}
			
			function creatBall(num,R,x,y){
				for (var i = 0; i < numbers[num].length; i++) {
					for (var k = 0; k < numbers[num][i].length; k++) {
						if (numbers[num][i][k] == 1) {
							var ball = new Ball(k*cw+x,i*cw+y,R);
						balls.push(ball);
						}
					}
				}
			}
			
			function drawBall(ctx){
				var numarr = 0;
				for (var i = 0; i < balls.length; i++) {
					ctx.beginPath();
					ctx.fillStyle = balls[i].color;
					ctx.arc(balls[i].x,balls[i].y,balls[i].r,0,2*Math.PI);
					ctx.fill();
					balls[i].y +=balls[i].fy;
					balls[i].x +=balls[i].fx;
					balls[i].fy +=1.8;
					if (balls[i].y >canvas.height - balls[i].r) { 
						balls[i].y =canvas.height-balls[i].r;
						balls[i].fy =-0.7*balls[i].fy;
					}
					if (balls[i].x>balls[i].r && balls[i].x <canvas.width+balls[i].r) {
						balls[numarr++]=balls[i];
					}
				}
				while(numarr<balls.length){
					balls.pop();
				}
			}

			function updateTime() {
				//监测时间的改变
				var date = new Date();
				var hh = date.getHours();
				var mm = date.getMinutes();
				var ss = date.getSeconds();
				//个位数的比较
				if(ss%10 != time.getSeconds()%10) {
					creatBall(time.getSeconds()%10,cw/2,50*cw,8*cw);
				}
				if(parseInt(ss/10) != parseInt( time.getSeconds()/10)) {
					creatBall(parseInt(time.getSeconds()/10),cw/2,42*cw,8*cw);
				}
				if(parseInt(mm/10) != parseInt( time.getMinutes()/10)) {
					creatBall(parseInt(time.getMinutes()/10),cw/2,23*cw,8*cw);
				}
				if(mm%10 != time.getMinutes()%10) {
					creatBall(time.getMinutes()%10,cw/2,51*cw,8*cw);
				}
				if(parseInt(hh/10) != parseInt( time.getHours()/10)) {
					creatBall(parseInt(time.getHours()/10),cw/2,4*cw,8*cw);
				}
				if(hh%10 != time.getHours()%10) {
					creatBall(time.getHours()%10,cw/2,12*cw,8*cw);
				}
			}
			getTime();	
			function getTime() {
				ctx.translate(4*cw, 8*cw);
				var timearr = [];
				time = new Date();
				var hh = time.getHours();
				var mm = time.getMinutes();
				var ss = time.getSeconds();
				timearr.push(parseInt(hh / 10));
				timearr.push(hh % 10);
				timearr.push(10);
				timearr.push(parseInt(mm / 10));
				timearr.push(mm % 10);
				timearr.push(10);
				timearr.push(parseInt(ss / 10));
				timearr.push(ss % 10);
				drawLed(timearr);
				ctx.translate(-50*cw, -8*cw);
			}

			function drawLed(timearr) {
				for(var i = 0; i < timearr.length; i++) {
					numDraw(timearr[i]);
					if(i == 0 || i == 3 || i == 6) {
						ctx.translate(8*cw, 0);
					} else if(i == 1 || i == 4) {
						ctx.translate(7*cw, 0);
					} else if(i == 2 || i == 5) {
						ctx.translate(4*cw, 0);
					}
				}
			}

			setInterval(function() {
				cw = 1/61*document.documentElement.clientWidth;
				ch = 1/61*document.documentElement.clientHeight;
				canvas.width = document.documentElement.clientWidth;
				canvas.height = document.documentElement.clientHeight;
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				ctx.fillStyle = 'cornflowerblue';
				ctx.fillRect(0,0,canvas.width,canvas.height);
				updateTime();
				getTime();
				drawBall(ctx);
			}, 50);
		</script>
	</body>

</html>